<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
  data: {
    Object,
    default: {},
  },
});
const content = ref([
  "25考研报名人数388人，但总招生人数仅100万人左右，因此有近百万人要加入到调剂竞争中，且调剂是学校再选优质学生，存在信息不对称、“暗规则”等因素，导致考研调剂竞争异常激烈。",
  "嗨写调剂择校报告旨在为考研学子提供全面且深入的调剂择校数据指导，帮助大家在调剂择校的浪潮中找准方向、把握机会，顺利驶上理想的学校。",
  "本报告基于全国院校调剂大数据，对历年所有院校考研调剂数据的深度挖掘与分析，结合最新的招生政策动态，为您呈现出一幅全面且清晰的考研调剂地图，提高调剂成功率。",
  "①根据您的一志愿院校及专业，提供近两年本专业及一级学科相关专业调剂去向，提供调剂的参考系。",
  "③提供对应“保稳冲”调剂志愿当年的招生人数、考试科目，近四年调剂拟录取人数、调剂拟录取最高分、调剂拟录取中位分、调剂拟录取最低分，近两年调剂拟录取名单等维度做数据支撑，为您提供明确的调剂方向。",
  "②结合调剂去向院校及您的初试成绩，为您推荐“保稳冲”调剂志愿。",
  "市面上出现很多可谓五花八门的调剂报告，更甚者提供了上千页的数据，但大部分是没有用的数据，并没有专业给出推荐指引范围，浪费了考生时间；因此，嗨写超级考研基于拥有1对1调剂指导老师团队近500人，5年来1对1辅导了十多万调剂考生的丰富经验，知道学生需要哪些数据，本报告尽可能的减少了大家在海量的信息中筛选分析的时间，剑锋所指，再结合当年最新的调剂信息，积极主动的联系院校研招办或导师，争取调剂名额，确定调剂院校，复试复习和调剂同时准备，稳步前进。",
  "同时，如果您拥有了本调剂报告，还是不知道、无从下手、没有精力、自己不专业等原因，希望有专业的老师进行一对一全程指导调剂，也可扫码下方详细了解，让专业的老师帮您复试和调剂一站式指导，大大的提高调剂成功率，一战上岸。",
]);

const org = ref("嗨写超级考研复试调剂教研组");
const year = ref(2025);
const month = ref("1");
const day = ref("2");
</script>
<template>
  <div class="foreword pageing">
    <div class="foreword-title">
      <div>前言</div>
    </div>
    <div class="foreword-content">
      <div class="paragraph" v-for="item in data.forewordContent" :key="item">{{ item }}</div>
    </div>
    <div class="foreword-footer">
      <img src="../../img/QRcode.png" alt="" />
      <div class="org">
        <div>{{ data.org }}</div>
        <div class="date">
          <span>{{ data.year }}</span>
          年 <span class="month"> {{ data.month }}</span> 月
          <span class="month">{{ data.day }}</span
          >日
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.foreword {
  .foreword-title {
    background-image: url("../../img/foreword_bg.png");
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: 100% 100%; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中显示 */
    text-align: center;
    div {
      font-size: 40px;
      color: #fff;
    }
  }

  .foreword-content {
    padding: 20px;
    .paragraph {
      text-indent: 2em;
    }
  }

  .foreword-footer {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 20px 20px;
    height: 200px;
    img {
      width: 100px;
      height: 100px;
      margin-left: 100px;
    }
    .org {
      text-align: right;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      div {
        margin-bottom: 10px;
        font-size: 20px;
      }

      .date {
        display: flex;
        align-items: center;
        justify-content: end;
        line-height: 1;
        .month {
          margin: 0 10px;
          display: inline-block;
          width: 30px;
          border-bottom: 1px solid #000;
          text-align: center;
          height: 20px;
        }
      }
    }
  }
}
</style>
